import React, { useState, useRef, useEffect } from 'react';
import { Form, Input, Button, message, Select, Row } from 'antd';
import localDb from '@/utils/localDB';
import { login } from '@/request/login';
import { useRouter } from 'next/router';
import md5 from 'js-md5';
import Icon from '@/components/layout/Icon';

const { Item } = Form;

const PhonePrefix = () => <Icon src="/images/user-prefix.png" className="prefix-icon" />;
const PwdPrefix = () => <Icon src="/images/pwd-prefix.png" className="prefix-icon" />;
const PwdNoSee = () => <Icon src="/images/no-see.png" className="prefix-icon" />;
const PwdSee = () => <Icon src="/images/see.png" className="prefix-icon" />;
const ClearIcon = () => <Icon src="/images/clear-icon.png" className="clear-icon" />;

const Login = (props) => {
  const nav = useRouter();
  const [form] = Form.useForm();
  //   提交表单 disabled
  const [btnLoading, setBtnLoading] = useState(false);

  /**
   * @description: 登录
   * @param {*}
   * @return {*}
   * @author:
   */
  const onFinish = async (values) => {
    setBtnLoading(true);
    const { password, name } = values;
    try {
      const res: any = await login({ userName: name, password: md5(password) });
      message.success('登录成功');
      setBtnLoading(false);
      localDb.set('userInfo', res);
      localDb.set('jwtToken', res.token);
      nav.push('/dashboard');
    } catch (err: any) {
      message.error(err.message);
      setBtnLoading(false);
    }
  };

  // 手机号码校验
  const checkPhone = (value) => {
    if (!value) {
      return Promise.reject();
    }
    return Promise.resolve();
  };

  // 密码校验
  const checkPwd = (value) => {
    if (!value) {
      return Promise.reject();
    }
    if (value.length < 6) {
      return Promise.reject(new Error('密码长度不能小于6位'));
    }
    return Promise.resolve();
  };

  return (
    <div className="login">
      <div className="leftInfo">
        <Icon src="/images/page-left.png" width={706} height={643} />
      </div>
      <div className="outer-silder">
        <div className="rightInfo">
          <div className="dw-system-name">
            <Icon src="/images/dialog-logo.png" width={340} height={170} />
          </div>
          <div className="loginForm">
            <Form
              form={form}
              onFinish={(values) => {
                onFinish(values);
              }}
            >
              <Form.Item
                style={{ marginBottom: '20px' }}
                name="name"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名',
                  },
                  {
                    validator: (_, value) => checkPhone(value),
                  },
                ]}
              >
                <Input placeholder="请输入" maxLength={10} prefix={<PhonePrefix />} allowClear={{ clearIcon: <ClearIcon /> }} />
              </Form.Item>
              <Form.Item
                style={{ marginBottom: '20px' }}
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  },
                  {
                    validator: (_, value) => checkPwd(value),
                  },
                ]}
              >
                <Input.Password placeholder="密码" maxLength={20} autoComplete="off" iconRender={(visible) => <Row>{visible ? <PwdSee /> : <PwdNoSee />}</Row>} prefix={<PwdPrefix />} suffix />
              </Form.Item>
              <div className="loginTips">访客登录：用户名guest，密码123456</div>
              <Form.Item>
                <Button type="primary" htmlType="submit" loading={btnLoading} className="button">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
      <div className="copyright">
        <p>Copyright © jrdaimao.com All rights reserved.</p>
      </div>
    </div>
  );
};

export default Login;
